<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-09 21:19:16
 * @LastEditTime: 2024-06-15 14:03:03
 * @FilePath: \env-manager-pc\src\views\data_query\pollute_err\components\declartion.vue
-->
<script setup lang="ts">
import { ElInput, type FormInstance } from 'element-plus'
import type { DeclareForm } from './page'
import { Declarerules, useInitDeclareForm } from './page'
import { ModelType } from '@/types/common'
import dataQueryApi from '@/api/modules/data.query'

const emits = defineEmits(['submit'])
const dialogVisible = ref(false)
const { formData, initForm } = useInitDeclareForm()
const formRef = ref<FormInstance>()
const btnLoading = ref(false)
const modelType = ref(ModelType.add)
const fileRef = ref()

function open(options: any) {
  modelType.value = options.type
  if (options.data) {
    formData.value = options.data as DeclareForm
  }
  getDetail(formData.value)
  dialogVisible.value = true
}

const isReadonly = computed(() => {
  return modelType.value === ModelType.readonly
})

function doLoading(flag: boolean) {
  btnLoading.value = flag
}

function submit() {
  formRef.value?.validate((vaild) => {
    if (vaild) {
      emits('submit', formData.value, doLoading)
    }
  })
}

function getDetail(data: any) {
  dataQueryApi.GetReuseExDeclare({
    produceObjID: data.ProduceObjID,
    reusePartObjID: data.ReusePartObjID,
    startTime: data.StartTime,
  }).then((res) => {
    formData.value = res
  })
}

function close() {
  dialogVisible.value = false
  btnLoading.value = false
  initForm()
  formRef.value?.resetFields()
}

function upload(data: any) {
  fileRef.value.submit(data)
}

defineExpose({
  open,
  close,
  upload,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    title="异常申报"
    width="80%"
    top="1%"
    draggable
    @closed="close"
  >
    <div class="max-h-[65vh] w-full overflow-x-hidden overflow-y-auto">
      <ElForm ref="formRef" label-width="180px" label-suffix="：" :model="formData" :rules="Declarerules">
        <ElRow :gutter="30">
          <ElCol :span="12">
            <ElFormItem label="生产设施" prop="ProduceName">
              {{ formData.ProduceName }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="治理设施" prop="ReuseName">
              {{ formData.ReusePartName }} - {{ formData.ReuseName }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="发生时间" prop="StartTime">
              {{ formData.StartTime }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="申报理由" prop="ReportContent">
              <ElInput v-model="formData.ReportContent" type="textarea" placeholder="请输入申报理由" :disabled="isReadonly" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="相关附件" prop="Files">
              <DeclearFileUpload ref="fileRef" is-ex :notip="false" :files="formData.Files" :readonly="isReadonly" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="申报人" prop="ReportName">
              <ElInput v-model="formData.ReportName" placeholder="请输入申报人" :disabled="isReadonly" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="联系电话" prop="ReportTel">
              <ElInput v-model="formData.ReportTel" placeholder="请输入联系电话" :disabled="isReadonly" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button v-if="!isReadonly" type="primary" :loading="btnLoading" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
